<template>
	<view class="mainPage">
		<view class="head">
			<view class="bg-img"><u--image src="/static/images/yu-bai.png" height="100rpx" width="100rpx"></u--image>
			</view>
			<view class="ticketInfo">
				<view class="name">
					鱼票信息
				</view>
				<view class="infoCount">
					总共已结算{{settledTotal}}元，已花费{{costTotal}}元
				</view>
			</view>
			<view class="menu">
				<view class="menu-li" v-for="(item,index) in menuList" :key="index"
					:class="{'active':currentTab==index}" @tap="tabMenu(index)">
					<view class="menu-li-label">
						{{item.label}}
					</view>
					<view class="menu-li-value">
						{{item.value}}
					</view>
				</view>
			</view>
		</view>
		<view class="ticket-wrap">
			<scroll-view scroll-y="true" :scroll-top="scrollTop" class="scroll-Y" @scrolltolower="loadMore" @scroll="scroll">
				<ticketItem :ticketList="ticketList" :selectionTab="menuList[currentTab].label" @backTo="backNav"></ticketItem>
				<u-loadmore :status="loadStatus" fontSize="26rpx" color="#9f9f9f" height="100rpx" :line="true" v-if="ticketList.length>0"/>
				<view style="height: 100rpx;"></view>
			</scroll-view>
		</view>
		<home></home>
	</view>
</template>

<script>
	// import { toLogin } from '@/libs/login.js';
	import home from '@/components/home';
	import { getTicketList } from '@/api/api.js';
	import ticketItem from '@/components/ticket-item/ticket-item.vue';
	// import ticketItem from './ticket-item/ticket-item.vue';
	export default {
		components: {
			ticketItem,
			home
		},
		data() {
			return {
				loadStatus:'loadmore',
				errorNetwork: false,
				isStar: true,
				message: '',
				socketTask: null,
				show: false,
				title: "提示",
				content: "",
				costTotal:0,//已花费
				settledTotal:0,//已结算
				scrollTop:0,
				oldScrollTop:0,
				menuList: [{
					label: "全部",
					value: "0"
				}, {
					label: "待付款",
					value: "0"
				}, {
					label: "待选位",
					value: "0"
				}, {
					label: "垂钓中",
					value: "0"
				}, {
					label: "待结算",
					value: "0"
				}, {
					label: "完成",
					value: "0"
				}],
				currentTab: 0,
				curUrl: "",
				ticketList: [
					/* {
						id:120,
						name: "水上田园",
						order: "nm1252125",
						fishNM: "dw2521252",
						price: "201.00",
						time: "2024-11-10/4小时",
						planned_start_time:'19:00:33',
						planned_end_time:'19:01:33',
						settled_fish_count:1,
						settled_fish_weight:2,
						money:10,
						state:1,
					},
					{
						id:144,
						name: "水上田园",
						order: "nm1252125",
						fishNM: "dw2521252",
						price: "220.00",
						time: "2024-11-19/3小时",
						planned_start_time:'',
						planned_end_time:'',
						settled_fish_count:1,
						settled_fish_weight:2,
						money:10,
						state:1,
					},
					{
						id:187,
						name: "水上田园",
						order: "NM1252412",
						fishNM: "dw2521252",
						price: "120.00",
						time: "2024-11-15/2小时",
						planned_start_time:'',
						planned_end_time:'',
						settled_fish_count:1,
						settled_fish_weight:2,
						money:10,
						state:2,
					}, */
				],
				pageInfo:{
					is_ticket:1,//1为鱼票 0为商城订单
					page:1,
					limit:10,
				}
				
			}
		},
		onLoad(option) {
			// this.socketConnect();//数据实时更新
			if(option.tab!=undefined)this.currentTab = option.tab
			this.getTicketListData(this.currentTab)
		},
		onShow() {

		},
		onHide() {

		},
		onPullDownRefresh() {

		},
		onReachBottom() {


		},
		onUnload() {
			// this.socketClose()
		},
		methods: {
			//触底加载更多
			loadMore(){
				// debugger
				let index = this.currentTab
				if(this.ticketList.length<this.menuList[index].value){
					this.getTicketListData(index)
				}else{
					this.loadStatus = 'nomore';
				}
			},
			//获取页面数据
			getTicketListData(status = 0){
				this.loadStatus = 'loading';
				// status 筛选 0:全部 、1:待付款、2:待选位、3:垂钓中、4:待结算、5:完成
				let params = this.pageInfo
				params.status = status
				getTicketList(params).then(res=>{
					// debugger
					this.loadStatus = 'loadmore';
					console.log(res);
					let ticketList = res.data.data
					let {total,costTotal,settledTotal} =  res.data
					this.settledTotal = settledTotal 
					this.costTotal = costTotal 
					this.menuList.forEach((item,index)=>{
						switch (index){
							case 0:
								item.value = total['total']
								break;
							case 1:
								item.value = total['1']
								break;
							case 2:
								item.value = total['2']
								break;
							case 3:
								item.value = total['3']
								break;
							case 4:
								item.value = total['4']
								break;
							case 5:
								item.value = total['5']
								break;
							default:
								break;
						}
					})
					let newArr = ticketList.map(item=>{
						let {ticket_order_id,mer_name,sn,partition_name,seat_name,price,date,time_rule,planned_start_time,planned_end_time,settled_fish_count,settled_fish_weight,order_status,seat_mode,settled_fish_money,group_order_id,order_id,refund_amount,settled_amount,unsettled_amount} = item
						
						if(planned_start_time)planned_start_time = planned_start_time.slice(-8)
						if(planned_end_time)planned_end_time = planned_end_time.slice(-8)
						// date = date.replace(/[年月日]/g, "-").slice(0,-1);
						let arr = {
							id:ticket_order_id,
							name: mer_name,
							order: sn,
							fishNM: `${partition_name?partition_name:'--'}/${seat_name?seat_name:'--'}`,
							price,
							// time: `${date}/${time_rule.sku}`,
							date,
							sku:time_rule.sku,
							planned_start_time,
							planned_end_time,
							settled_fish_count,
							settled_fish_weight,
							settled_fish_money,
							order_status,
							seat_mode,
							group_order_id,
							order_id,
							refund_amount,
							settled_amount,
							unsettled_amount
						}
						return arr
					})
					this.ticketList = this.ticketList.concat(newArr)
					let index = this.currentTab
					if(this.ticketList.length>=this.menuList[index].value)this.loadStatus = 'nomore';
					this.pageInfo.page++
				})
			},
			backNav(obj){
				console.log(obj);
				// uni.$emit('selectTicket', obj)
				uni.setStorageSync('updateSelectId', obj.id);
				uni.switchTab({
					url:'/pages/fishing/index'
				})
			},
			scroll(e) {
				this.oldScrollTop = e.detail.scrollTop
			},
			tabMenu(index) {
				if(this.currentTab!=index){
					this.scrollTop = this.oldScrollTop
					this.currentTab = index;
					this.ticketList = []
					this.pageInfo.page = 1
					this.pageInfo.limit = 10
					this.getTicketListData(index)
					this.$nextTick(function() {
						this.scrollTop = 0
					});
				}
				
			},
			/* prompt(text, url, val) {
				this.curUrl = url;
				this.content = text;
				this.show = true;
			},
			socketConnect() {
				const wsUrl = 'wss://your-websocket-server-url';
				this.socketTask = uni.connectSocket({
					url: wsUrl,
					complete: () => {}
				});

				this.socketTask.onOpen(() => {
					console.log('WebSocket连接已打开！');
				});
				this.socketTask.onMessage((res) => {
					console.log('收到服务器内容：' + res.data);
					this.message = res.data
				});
				this.socketTask.onError((err) => {
					console.log('WebSocket连接打开失败，请检查！');
				});
			},
			socketClose() {
				if (this.socketTask) {
					this.socketTask.close();
				}
			},
			closeFish() {
				this.show = true;
			},
			cancelEvent() {
				this.show = false;
			},
			sureEvent() {
				this.show = false;
				uni.navigateTo({
					url: this.curUrl
				});
			},
			chooseSeat() {
				uni.navigateTo({
					url: "/pages/angling/chooseSeat"
				});
			}, */
			toFishList() {
				uni.navigateTo({
					url: "/pages/angling/returnFishRecord"
				});
			}

		}
	}
</script>

<style lang="scss" scoped>
	.mainPage {
	}

	.head {
		position: fixed;
		height: 210rpx;
		width: 100%;
		background-color: #66adf0;
		top: 0;
		left: 0;
		z-index: 100;
		.bg-img {
			position: absolute;
			width: 100rpx;
			height: 100rpx;
			right: 30rpx;
			top: 40rpx
		}

		.ticketInfo {
			position: absolute;
			left: 30rpx;
			color: #fff;
			top: 36rpx;
			.name {
				font-size: 34rpx;
				font-weight: bold;
			}

			.infoCount {
				font-size: 24rpx;
				color: #dbedff;
				margin-top: 12rpx;
			}
		}

		.menu {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			position: absolute;
			bottom: -54rpx;
			width: 690rpx;
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			border-radius: 10rpx;
			left: 30rpx;
			background-color: #fff;
			box-shadow: 0 0 8px 0 #66adf022;
			.menu-li {
				font-size: 26rpx;
				width: 100%;
				text-align: center;

				.menu-li-value {
					margin-top: 10rpx;
				}
			}

			.active {
				font-weight: bold;
				position: relative;
			}

			.active:after {
				content: "";
				display: block;
				height: 4rpx;
				width: 60rpx;
				background-color: #66adf0;
				position: absolute;
				bottom: -16rpx;
				left: 30rpx;
			}
		}

	}
	.ticket-wrap{
		position: fixed;
		top: 210rpx;
		width: 100%;
		height: calc(100vh - 210rpx);
		.scroll-Y{
			height: 100%;
		}
	}
	.ticket-mod {
		padding-left: 30rpx;
		padding-right: 30rpx;
		margin-top: 80rpx;

		.ticket-item {
			padding: 30rpx;
			border-radius: 20rpx;
			background-color: #fff;
			position: relative;
			margin-bottom: 20rpx;

			.ticket-item-title {
				font-size: 28rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
			}

			.info-mod {
				padding: 30rpx;
				background-color: #f6f7f9;
				border-radius: 20rpx;

				.ticket-info-item {
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					font-size: 24rpx;
					margin-bottom: 20rpx;

					.info-item-label {
						color: #9e9e9e;
						width: 180rpx;
					}
				}

				.ticket-info-item:nth-last-child(1) {
					margin-bottom: 0;
				}
			}

			.ticket-item-bottom {
				font-size: 24rpx;
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				margin-top: 30rpx;

				.ticket-btn-a {
					background-color: #fff9eb;
					border: 2rpx solid #ffc53e;
					color: #ffc53e;
					padding: 10rpx 30rpx;
					border-radius: 48rpx;
					margin-left: 20rpx;
				}

				.ticket-btn-b {
					background-color: #ffc53e;
					border: 2rpx solid #ffc53e;
					color: #fff9eb;
					padding: 10rpx 30rpx;
					border-radius: 48rpx;
					margin-left: 20rpx;
				}
			}

			.ticket-item-state {
				background-color: #73b4f1;
				color: #fff;
				position: absolute;
				top: 0;
				right: 0;
				border-top-right-radius: 20rpx;
				border-bottom-left-radius: 20rpx;
				padding: 10rpx 20rpx;
				font-size: 24rpx;
			}
		}
	}
</style>